<template>
	<view class="qxlj_back4 contain">
		<view class="center_title">
			<image :src="imgUrl+'upload/img/ws_static/static/userimg/backQD.jpg'" class="imgOne"  mode=""></image>
			<!-- 顶部内容 -->
			<view class="con_box">
				<view class="con_img">
					<image :src="headImg" mode=""></image>
				</view>
				<view class="sun_text">
					<view class="one">
						<view class="name">{{name}}</view>
					</view>
					<!-- <view class="two">开心生活每一天</view> -->
					<view class="two"></view>
				</view>
				<view class="sz_img">
					<image :src="imgUrl+'upload/img/ws_static/static/userimg/jf.png'" mode=""></image>
					<view class="js_all">
						<view>积分值：</view>
						<view class="jf">{{userIntegral}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 签到内容 -->
		<view class="contain_box">
			<view class="title">
				<view class="one">
					签到领积分
				</view>
				<view class="two" @click="goDetail">
					<view class="">
						查看规则
					</view>
					<image :src="imgUrl+'upload/img/ws_static/static/userimg/bz.png'" mode=""></image>
				</view>
			</view>

			<view class="jf_box">
				<view class="item_qd" v-for="(item,index) in sigList" :key="index" :class="item.status?'':'item_wqd'">
					<view class="item_center" @click="postInfoSign(item.yes)">
						<view class="day">{{item.day}}</view>
						<!-- <view class="pic">
							<image v-if="item.status" :src="imgUrl+'upload/img/ws_static/static/userimg/qiandao.png'" mode=""></image>
							<image v-else :src="imgUrl+'upload/img/ws_static/static/userimg/qiandaoT.png'"  mode=""></image>
						</view> -->
						<view class="num">{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserSignIn,
		getUserSignInPost
	} from '@/api/qxlj.js';
	import {
		getUserIntegral,
		getChildren
	} from '@/api/homePage.js';
		import Config from "@/config";
	export default {
		data() {
			return {
				imgUrl: Config.imgUrl,
				name: '',
				headImg: '',
				userIntegral: 0,
				myUser: '',
				sigList: [{
					day: '第一天',
					num: '+1',
					status: false,
					yes:false,
				}, {
					day: '第二天',
					num: '+2',
					status: false,
					yes:false,
				}, {
					day: '第三天',
					num: '+3',
					status: false,
					yes:false,
				}, {
					day: '第四天',
					num: '+4',
					status: false,
					yes:false,
				}, {
					day: '第五天',
					num: '+5',
					status: false,
					yes:false,
				}, {
					day: '第六天',
					num: '+6',
					status: false,
					yes:false,
				}, {
					day: '第七天',
					num: '+7',
					status: false,
					yes:false,
				}],
				linkUrl:'',//规则
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.obj)
			this.name = data.Name;
			this.headImg = data.HeadImg;
			this.userIntegral = data.userIntegral;
			this.getUserCenter();
			this.getGLDate();
		},
		methods: {
			// 积分
			async getIntegral() {
				try {
					const {
						Data
					} = await getUserIntegral({
			
					})
					this.userIntegral = Data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			goDetail(){
				uni.navigateTo({
					url:this.linkUrl
				})
			},
			//获取签到规则
			async getGLDate() {
				uni.showLoading({});
				try {
					const Data = await getChildren({
						ArticleCategoryId: 3406,
					})
					uni.hideLoading();
					this.linkUrl = Data.Data[0].LinkUrl;
				} catch (e) {
			
				}
			},
			//提交签到信息
			async postInfoSign(e) {
				if(e){
					try {
						const {
							Data
						} = await getUserSignInPost({});
						uni.showToast({
							title: '签到成功',
							icon: 'success',
							duration: 2000
						});
						this.getUserCenter();
						this.getIntegral();
					} catch (e) {
						//TODO handle the exception
						uni.showToast({
							title: '请勿重复签到',
							icon: 'error',
							duration: 2000
						});
					}
				}else{
					uni.showToast({
						title: '请勿重复签到',
						icon: 'error',
						duration: 2000
					});
				}
			},
			//获取当前用户签到信息
			async getUserCenter() {
				try {
					const {
						Data
					} = await getUserSignIn({});
					console.log(Data)
					this.myUser = Data;
					//当天是否签到SignStatus   签到的累计天数SignContinuousDays
					if (Data.SignStatus == 0) {
						for(let i=0;i<Data.SignContinuousDays;i++){
							this.sigList[i].status =true;
							this.sigList[i].num ='已签到';
						}
						this.sigList[Data.SignContinuousDays].status = true;
						this.sigList[Data.SignContinuousDays].yes = true;
					}else{
						for(let i=0;i<Data.SignContinuousDays;i++){
							this.sigList[i].status =true;
							this.sigList[i].num ='已签到';
							this.sigList[Data.SignContinuousDays-1].yes = true;
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.contain {
		width: 100%;
		min-height: 100vh;
	}


	.center_title {
		width: 100%;
		height: 354rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	//顶部内容
	.con_box {
		width: 96%;
		display: flex;
		align-items: center;
		margin: 0 2%;
		position: absolute;
		top: 10%;
		left: 0;
		color: #fff;

		.con_img {
			width: 130rpx;
			height: 130rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.sun_text {
			width: 50%;
			margin-left: 3%;

			.one {
				display: flex;
				align-items: center;

				.name {
					font-weight: bold;
					font-size: 18px;
				}
			}

			.two {
				font-size: 24rpx;
				margin-top: 2%;
				height: 16px;
			}
		}

		.sz_img {
			position: absolute;
			right: 4%;
			display: flex;
			font-size: 24rpx;
			align-items: center;
			color: #FFF;
			width: 225rpx;
			justify-content: flex-end;

			image {
				width: 26rpx;
				height: 28rpx;
				margin-right: 4%;
			}

			.js_all {
				display: flex;
				align-items: baseline;
			}

			.jf {
				font-size: 36rpx;
			}
		}
	}

	//签到内容
	.contain_box {
		width: 92%;
		margin: 0 4%;
		margin-top: -20%;
		position: relative;
		background: #fff;
		height: 500rpx;
		border-radius: 2%;
		padding: 4%;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.one {
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;
			}

			.two {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				width: 23%;
				color: #999999;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 2%;
				}
			}
		}

		.jf_box {
			width: 100%;
			font-size: 24rpx;
			margin-top: 4%;
			display: flex;
			flex-wrap: wrap;
			justify-content: start;


			.item_qd {
				width: 23%;
				height: 140rpx;
				background-color: #EEF5F3;
				color: #498FFF;
				text-align: center;
				position: relative;
				margin-right: 2%;
				margin-bottom: 4%;
				border-radius: 4%;

				.item_center {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.pic {
						margin: 10% 0;

						image {
							width: 46rpx;
							height: 41rpx;
						}
					}
				}

			}

			.item_wqd {
				background-color: #F2F2F2;
				color: #999999;
			}
		}
	}
</style>